<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <el-button class="history-btn" @click="hisDrawer = true" size="small">历史记录</el-button>
      <div class="data-box-left">
        <div class="user-title-box" v-if="$fieldShowFunc('14-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('yh_glxm')">
            <div class="justify_8" slot="label">项目名称</div>
            {{ dataObj.project_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('yh_xmbh')">
            <div class="justify_8" slot="label">项目编号</div>
            <el-button @click="goToProjectFunc" type="text" style="padding: 0;">{{ dataObj.project_number || '--'
              }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('yh_xmpp')">
            <div class="justify_8" slot="label">项目品牌</div>
            {{ dataObj.brand_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('yh_xmlx')">
            <div class="justify_8" slot="label">项目类型</div>
            {{ dataObj.store_type_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="报价单信息" v-if="$fieldShowFunc('yh_bjdxx') && dataObj.type == 1">
            <div class="justify_8" slot="label">报价单信息</div>
            <el-button @click="goToDetailFunc" type="text" style="padding: 0;">{{ dataObj.project_quotation_num || '--'
              }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="结算单信息" v-if="$fieldShowFunc('yh_jsdxx') && dataObj.type == 2">
            <div class="justify_8" slot="label">结算单信息</div>
            <el-button @click="goToDetailFunc" type="text" style="padding: 0;">{{ dataObj.settlement_number || '--'
              }}</el-button>
          </el-descriptions-item>

          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 3, 0, dataObj.type == 1 ? ['yh_jsdxx'] : ['yh_bjdxx'])"
            :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('14-yhspxx')">优惠审批信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="审批类型" v-if="$fieldShowFunc('yh_splx')">
            <div class="justify_8" slot="label">审批类型</div>
            {{ dataObj.type == 1 ? '对客报价优惠' : '结算优惠' }}
          </el-descriptions-item>
          <el-descriptions-item v-if="$fieldShowFunc('yh_ysbjje')">
            <div class="justify_8" slot="label">{{ dataObj.type == 1 ? '预算报价金额' : '结算报价金额' }}</div>
            {{ dataObj.budget_quotation_amount ? dataObj.budget_quotation_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item v-if="$fieldShowFunc('yh_yjqyje')">
            <div class="justify_8" slot="label">{{ dataObj.type == 1 ? '预计签约金额' : '预计结算金额' }}</div>
            {{ dataObj.expected_signing_amount ? dataObj.expected_signing_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="审批状态" v-if="$fieldShowFunc('yh_shzt')">
            <div class="justify_8" slot="label">审批状态</div>
            <span v-if="dataObj.customer_director_review == 1">审核中</span>
            <span v-if="dataObj.customer_director_review == 2">审核通过</span>
            <span v-if="dataObj.customer_director_review == 3">审核拒绝</span>
            <span v-if="dataObj.customer_director_review == 4">已废弃</span>
          </el-descriptions-item>
          <el-descriptions-item label="审批意见" v-if="$fieldShowFunc('yh_shjjly')">
            <div class="justify_8" slot="label">审批意见</div>
            {{ dataObj.reason_refusal || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="成本金额" v-if="$fieldShowFunc('yh_cbje')">
            <div class="justify_8" slot="label">成本金额</div>
            {{ dataObj.cost_amount ? dataObj.cost_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="优惠金额" v-if="$fieldShowFunc('yh_yhje')">
            <div class="justify_8" slot="label">优惠金额</div>
            {{ dataObj.discount_amount ? dataObj.discount_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="优惠后利润金额" v-if="$fieldShowFunc('yh_yhhlrje')">
            <div class="justify_8" slot="label">优惠后利润金额</div>
            {{ dataObj.remaining_profit_amount ? dataObj.remaining_profit_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="优惠后成本利润率" v-if="$fieldShowFunc('yh_yhhcblrl')">
            <div class="justify_8" slot="label">优惠后成本利润率</div>
            {{ dataObj.remaining_cost_profit_ratio ? dataObj.remaining_cost_profit_ratio + '%' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="优惠前利润金额" v-if="$fieldShowFunc('yh_yhqlrje')">
            <div class="justify_8" slot="label">优惠前利润金额</div>
            {{ dataObj.profit_amount ? dataObj.profit_amount + '元' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="优惠前成本利润率" v-if="$fieldShowFunc('yh_yhqcblrl')">
            <div class="justify_8" slot="label">优惠前成本利润率</div>
            {{ dataObj.cost_profit_ratio ? dataObj.cost_profit_ratio + '%' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" v-if="$fieldShowFunc('yh_cjsj')">
            <div class="justify_8" slot="label">创建时间</div>
            {{ dataObj.created_at || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人" v-if="$fieldShowFunc('yh_cjr')">
            <div class="justify_8" slot="label">创建人</div>
            {{ dataObj.name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 3, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 审核区域 -->
    <div class="examine-box" v-if="isExamine">
      <div class="examine-title">审核区域</div>
      <el-form :model="shForm">
        <el-form-item label="是否通过" style="margin-bottom: 0px">
          <el-radio-group v-model="shForm.reviewPassed">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-input :rows="4" type="textarea" v-model="shForm.remark" placeholder="审批意见"></el-input>
        </el-form-item>
        <el-form-item label=""
          v-if="shForm.reviewPassed == 1 && dataObj.is_retrial != 3 && (userInfo.position_id == 1 || userInfo.position_id == 10)">
          <el-checkbox v-model="shForm.is_retrial">是否需要总经理审核</el-checkbox>
        </el-form-item>
        <el-form-item>
          <div class="form-btn">
            <el-button type="primary" @click="shbjdSubmit" :loading="diaLoading">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 历史弹窗 -->
    <el-drawer @close="hisDrawer = false" title="历史记录" :visible.sync="hisDrawer" :with-header="false" size="600px">
      <div class="right-box">
        <div class="title-box flex ac fw" style="margin: 20px 0 0 10px">历史记录</div>
        <el-timeline class="timeline">
          <template v-if="!logList.length">
            <el-empty description="无历史数据"></el-empty>
          </template>
          <el-timeline-item v-for="(item, index) in logList" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">{{ item.updated_at || '' }}</p>
                <div class="user-box flex ac">
                  <img class="avater" :src="item.handlers_image" />
                  {{ item.handlers_name + "-" + item.handlers_position }}
                </div>
              </div>
              <div class="setp-content">
                <div class="title">
                  {{ item.content }}
                </div>
                <template v-if="item.log_status == 260">
                  <div class="content-table">
                    <div class="flex jb ">
                      <div class="table-item" v-if="$fieldShowFunc('yh_shjjly')">
                        <span class="table-item-title history_justify_8">审批意见</span>
                        <span class="table-item-content">{{
                          item.form_data.reason_refusal || '--'
                          }}</span>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-if="item.log_status == 270">
                  <div class="content-table">
                    <div class="flex jb ">
                      <div class="table-item" v-if="$fieldShowFunc('yh_shjjly')">
                        <span class="table-item-title history_justify_8">审批意见</span>
                        <span class="table-item-content">{{
                          item.form_data.reason_refusal || '--'
                          }}</span>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-if="item.log_status == 255">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item width-50" v-if="$fieldShowFunc('yh_ysbjje')">
                        <span class="table-item-title history_justify_8">{{ dataObj.type == 1 ? '预算报价金额' : '结算报价金额'
                          }}</span>
                        <span class="table-item-content">{{
                          item.form_data.budget_quotation_amount ? item.form_data.budget_quotation_amount + '元' : '--'
                          }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('yh_yjqyje')">
                        <span class="table-item-title history_justify_8">{{ dataObj.type == 1 ? '预计签约金额' : '预计结算金额'
                          }}</span>
                        <span class="table-item-content">{{
                          item.form_data.expected_signing_amount ? item.form_data.expected_signing_amount + '元' : '--'
                          }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('yh_yhje')">
                        <span class="table-item-title history_justify_8">优惠金额</span>
                        <span class="table-item-content">{{
                          item.form_data.discount_amount ? item.form_data.discount_amount + '元' : '--'
                          }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('yh_yhhlrje')">
                        <span class="table-item-title history_justify_8">优惠后利润金额</span>
                        <span class="table-item-content">{{
                          item.form_data.remaining_profit_amount ? item.form_data.remaining_profit_amount + '元' : '--'
                          }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('yh_yhhcblrl')">
                        <span class="table-item-title history_justify_8">优惠后成本利润率</span>
                        <span class="table-item-content">{{
                          item.form_data.remaining_cost_profit_ratio ? item.form_data.remaining_cost_profit_ratio + '%'
                            : '--'
                        }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('yh_yhqlrje')">
                        <span class="table-item-title history_justify_8">优惠前利润金额</span>
                        <span class="table-item-content">{{
                          item.form_data.profit_amount ? item.form_data.profit_amount + '元' : '--'
                          }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('yh_yhqcblrl')">
                        <span class="table-item-title history_justify_8">优惠前成本利润率</span>
                        <span class="table-item-content">{{
                          item.form_data.cost_profit_ratio ? item.form_data.cost_profit_ratio + '%' : '--'
                          }}</span>
                      </div>

                    </div>
                  </div>
                </template>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import discountApi from '@/api/discountApi';
import { getUserInfo } from '@/utils/auth';

export default {
  name: 'rectificationFormDetailPage',
  data() {
    return {
      // 审核
      userInfo: {},
      shForm: {
        remark: "",
        quotation_id: "",
        reviewPassed: 1,
        is_retrial: false
      },
      diaLoading: false,
      isExamine: false,

      diaLoading: false,
      zjxPrice: false,
      cbPrice: false,
      logList: [],
      dataObj: '',
      hisDrawer: false,
    };
  },
  computed: {

  },
  mounted() {
    this.isExamine = this.$route.query.examine || false;
    this.userInfo = getUserInfo();
    this.discountApprovalDetails();
  },
  methods: {
    // 整改单详情
    discountApprovalDetails() {
      if (!this.$route.query.id) return;
      discountApi.discountApprovalDetails({
        discount_id: this.$route.query.id
      }).then(res => {
        console.log(res, "优惠审批详情")
        if (res.code == 200) {
          res.data.log_list.forEach(item => {
            item.form_data = JSON.parse(item.form_data);
          })
          this.logList = res.data.log_list || [];
          this.dataObj = res.data;
        }
      })
    },
    // 审核
    shbjdSubmit(formName) {
      let shForm = this.shForm;
      console.log(shForm, "审核参数");

      // 拒绝
      if (shForm.reviewPassed == 2) {
        if (!shForm.remark) {
          this.$message({
            type: 'warning',
            message: '请填写审批意见'
          })
          return;
        }
        this.discountReviewRejected({
          discount_id: this.$route.query.id,
          reason_refusal: shForm.remark
        });
        return;
      }
      // 通过
      let obj = {
        discount_id: this.$route.query.id,
        reason_refusal: shForm.remark
      };
      if (this.dataObj.is_retrial != 3 && (this.userInfo.position_id == 1 || this.userInfo.position_id == 10)) {
        obj.is_retrial = shForm.is_retrial ? 3 : 0;
      }
      this.discountReviewPassed(obj);
    },
    // 拒绝审核
    discountReviewRejected(obj) {
      this.diaLoading = true;
      discountApi.discountReviewRejected(obj).then(res => {
        console.log(res, "拒绝审核")
        this.diaLoading = false;
        if (res.code == 200) {
          this.discountApprovalDetails();
          this.isExamine = false;
          this.$router.push({
            path: '/discountDetail',
            query: {
              id: this.$route.query.id,
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 通过审核
    discountReviewPassed(obj) {
      this.diaLoading = true;
      discountApi.discountReviewPassed(obj).then(res => {
        console.log(res, "审核通过")
        this.diaLoading = false;
        if (res.code == 200) {
          this.discountApprovalDetails();
          this.isExamine = false;
          this.$router.push({
            path: '/discountDetail',
            query: {
              id: this.$route.query.id,
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    goToDetailFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      if (this.dataObj.type == 1) {
        // 报价
        this.$router.push({
          path: '/budgetDetailPage',
          query: {
            id: this.dataObj.project_id
          }
        })
      } else {
        // 结算
        this.$router.push({
          path: '/settlemenDetailPage',
          query: {
            id: this.dataObj.project_id
          }
        })
      }
    },
    // 去项目详情
    goToProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/projectDetailNew',
        query: {
          id: this.dataObj.project_id
        }
      })
    },
  },
};

</script>
<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/detail.scss';
</style>
<style lang="scss">
.labelClassName {
  width: 160px;
  background: #f5f8fe !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.contentClassName {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
}

.labelClassName2 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.contentClassName2 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
}
</style>